<template>
  <div class="Paddmanage">
    <div class="tou">
      <Pheader style="margin-right:70%;" msg="地址管理"></Pheader>
      <router-link to="/home/P_addmanage/P_addempty">
        <Pbutton msg="添加新地址" id="lookmenu"></Pbutton>
      </router-link>
    </div>
    <div class="addCon">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{background:'#f2f2f2'}"
        :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column prop="name" label="收货人" width="80"></el-table-column>
        <el-table-column prop="city" label="所在区域" width="80"></el-table-column>
        <el-table-column prop="stree" label="街道地址" width="80"></el-table-column>
        <el-table-column prop="phone" label="联系电话" width="180"></el-table-column>
        <el-table-column prop="beizhu" label="备注"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button id="default" @click.native.prevent="showRow(scope.$index, tableData)" type="text" size="small">
				<span v-if="isShow">设为默认地址</span><span v-if="!isShow">默认地址</span>
			</el-button>
            <el-button id="change" type="text" size="small">修改</el-button>
            <el-button
              type="text"
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              size="small"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
//头部小组件
import Pheader from "@/components/P_header.vue";
// 引入button小组件
import Pbutton from "@/components/P_button.vue";
import Qs from "qs";
export default {
  components: {
    Pheader,
    Pbutton
  },
  data() {
    return {
      tableData: [
        // {people: '安宝儿',area: '郑州',address: '武陟县',telphone: '15670957013',beizhu: '快递到了请发短信，谢谢！'},
        // {people: '安宝儿',area: '郑州',address: '武陟县',telphone: '15670957013',beizhu: '快递到了请发短信，谢谢！'},
        // {people: '安宝儿',area: '郑州',address: '武陟县',telphone: '15670957013',beizhu: '快递到了请发短信，谢谢！'},
        // {people: '安宝儿',area: '郑州',address: '武陟县',telphone: '15670957013',beizhu: '快递到了请发短信，谢谢！'},
        // {people: '安宝儿',area: '郑州',address: '武陟县',telphone: '15670957013',beizhu: '快递到了请发短信，谢谢！'},
        // {people: '安宝儿',area: '郑州',address: '武陟县',telphone: '15670957013',beizhu: '快递到了请发短信，谢谢！'}
      ],
      isShow: true
    };
  },
  created() {
    var _this = this;
    this.$axios({
      method: "post",
      url: "http://localhost:3000/recentlook/address",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    })
      .then(function(response) {
        _this.tableData = response.data.result;
        _this.code = response.data.code;
        window.console.log(_this.tableData[0].id);
      })
      .catch(function(error) {
        window.console.log(error);
      });
  },
  methods: {
    deleteRow(index, rows) {
      var _this = this;
      var addid = rows[index].id;
      let data = Qs.stringify({ addressId: addid });
      rows.splice(index, 1);
      this.$axios({
        method: "post",
        url: "http://localhost:3000/recentlook/addressdeleat",
        data: data,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
        .then(response => {
          _this.list = response.data.result;
          _this.code = response.data.code;
        })
        .catch(function(error) {
          _this.data = error;
        });
    },
    showRow(index, rows){
		var _this = this;
		this.isShow = !this.isShow;
      var addid = rows[index].id;
      let data = Qs.stringify({ addressId: addid });
	//   this.isShow = !this.isShow;
	this.$axios({
        method: "post",
        url: "http://localhost:3000/recentlook/addressmoren",
        data: data,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
        .then(response => {
          _this.list = response.data.result;
          _this.code = response.data.code;
        })
        .catch(function(error) {
          _this.data = error;
        });
	}
  }
};
</script>

<style>
.Paddmanage {
  width: 100%;
  height: 488px;
  border: 1px solid #e7e7e7;
  /* margin-left:1%; */
  /* position: absolute;
  top: 0px;
  left: 0px; */
  background: #fff;
  position: relative;
}
.Paddmanage .tou {
  padding: 10px 13px;
  border-bottom: 1px solid #e7e7e7;
  display: flex;
}
.addCon {
  margin: 20px;
  border-right: 1px solid #e7e7e7;
}
.addCon tbody {
  font-size: 14px;
}
#default span {
  color: #f08200 !important;
  border-right: 1px solid #999;
  padding-right: 5px;
}
#change span {
  border-right: 1px solid #999;
  padding-right: 5px;
}
.addCon table {
  margin-bottom: 0px;
  margin-top: 0px;
  border: 0px;
}
#lookmenu {
  padding: 3px 15px;
  /* margin-left:80%; */
  /* float: right; */
}
</style>
